<template>
  <nav class="navbar-box">
    <div class="clearfix">
      <h3 class="site-navbar__menu" style="font-style: oblique">
        让一切变得简单
      </h3>
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal"
      >
        <el-menu-item index="2" v-for="(item, index) in Menus" :key="index">
          <el-badge value="">
            <router-link :to="{ name: item.to }">{{ item.name }}</router-link>
          </el-badge>
        </el-menu-item>

        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img
                class="img-avatar"
                :src="userAvatar"
                v-if="userAvatar != ''"
                style="width: 40px; height: 40px; border-radius: 50%"
              />
              <!-- <el-avatar :size="30" :src="userAvatar" v-if="userAvatar != ''" fit="fill">
              </el-avatar> -->
              <img v-else src="~@/assets/images/avatar.png" :alt="userName" />{{
                userName
              }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updateUserInfo()"
                >个人设置</el-dropdown-item
              >
              <el-dropdown-item @click.native="updatePasswordHandle()"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="logoutHandle()"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 弹窗, 修改密码 -->
    <update-password
      v-if="updatePassowrdVisible"
      ref="updatePassowrd"
    ></update-password>

    <!-- 弹窗, 修改个人信息 -->
    <main-navbar-update-userinfo
      v-if="updateUserInfoVisible"
      ref="updateUserInfo"
    ></main-navbar-update-userinfo>
  </nav>
</template>

<script>
import UpdatePassword from "./main-navbar-update-password";
import { clearLoginInfo } from "@/utils";
import MainNavbarUpdateUserinfo from "./main-navbar-update-userinfo.vue";
export default {
  inject: ["reload"],
  data() {
    return {
      Menus: [],
      teacherMenus: [
        { name: "课程主页", to: "course" },
        { name: "我的数据", to: "#" },
        // { name: "关于我们", to: "#" },
        // { name: "签到管理", to: "#" },
        // { name: "题库管理", to: "#" },
        // { name: "数据监控", to: "#" },
      ],
      studentMenus: [
        { name: "我的课程", to: "#" },
        { name: "我的班级", to: "#" },
        { name: "我的作业", to: "#" },
        { name: "我的签到", to: "#" },
        { name: "我的数据", to: "#" },
      ],
      updatePassowrdVisible: false,
      updateUserInfoVisible: false,
    };
  },
  components: {
    UpdatePassword,
    MainNavbarUpdateUserinfo,
  },
  created() {
    this.setMenus();
  },
  computed: {
    // mainTabs: {
    //   get() {
    //     return this.$store.state.common.mainTabs;
    //   },
    //   set(val) {
    //     this.$store.commit("common/updateMainTabs", val);
    //   },
    // },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
    },
    userAvatar: {
      get() {
        return this.$store.state.user.avatar;
      },
    },
  },
  methods: {
    setMenus() {
      if (this.$store.state.user.userType == "teacher") {
        this.Menus = this.teacherMenus;
      }
      if (this.$store.state.user.userType == "student") {
        this.Menus = this.studentMenus;
      }
    },
    //个人信息修改
    updateUserInfo() {
      this.updateUserInfoVisible = true;
      this.$nextTick(() => {
        this.$refs.updateUserInfo.init();
      });
    },

    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },

    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/edu-teacher/logout"),
            method: "post",
            data: this.$http.adornData(),
          }).then(({ data }) => {
            if (data && data.code === 20000) {
              clearLoginInfo();
              this.$router.push({ name: "login" });
            }else{
              this.$message.error("退出失败！");
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.navbar-box {
  border-bottom: solid #dcdfe6 1px;
  background-color: white;
}
.clearfix {
  width: 81%;
  margin: 0 auto;
}
.img-avatar {
}
.site-navbar__menu{
  color: #606266;
}
</style>
